<template>
  <div class="swiper-container">
    <swiper :options="swiperOption" ref="mySwiper" class="swiper">
      <!-- slides -->
      <swiper-slide>
        <img src="../../img/mi_1.jpg" alt />
      </swiper-slide>
      <swiper-slide>
        <img src="../../img/mi_2.jpg" alt />
      </swiper-slide>
      <swiper-slide>
        <img src="../../img/mi_3.jpg" alt />
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        // 所有的参数同 swiper 官方 api 参数
        autoHeight: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        speed:300,
        // effect:'fade'
        loop:true,
        autoplay:true,
      }
    };
  },
  method() {},
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  mounted() {
    // this.swiper.slideTo(1, 6000, true);
  }
};
</script>
<style lang="scss">
$base: 50;
.swiper-container {
  width: 14rem;
  margin-top: 142rem / $base;
  position: relative;
  .swiper {
    .swiper-slide {
      img {
        height: 360rem / $base;
        margin: 0 auto;
      }
    }
    .swiper-scrollbar {
      background: rgba(0, 0, 0, 0);
    }
  }
}
</style>